<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<style type="text/css">
    #msg {
        height: 400px;
        overflow-y: auto;
    }

    #logout {
        display: none;
    }
</style>
<title>webSocket测试</title>
</head>
<body>
<header class="mui-bar mui-bar-nav" style="background-color: white">
    <a href="javascript:" onclick="history.go(-1);" class="mui-icon mui-pull-left"><span style="font-size: 15px;color: black" >返回</span></a>
    <h1 class="mui-title">交流圈</h1>
</header>
<div class="container">
    <input id="userName" type="hidden" th:value="${usersDO.nickName}"/>
    <div class="page-header" id="tou">webSocket及时聊天Demo程序</div>
    <!--<p class="text-right" id="logout">
        <button class="btn btn-danger" id="logout-btn">退出</button>
    </p>-->
    <div class="well" id="msg"></div>
    <div class="col-lg">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="发送信息..." id="message"> <span class="input-group-btn">
                    <button class="btn btn-normal" type="button" id="send" >发送</button>
                </span>
        </div>
        <!--<div class="input-group">
            <button class="btn btn-default" type="button" id="connection-btn">建立连接</button>
        </div>-->
        <!-- /input-group -->
    </div>
    <!-- /.col-lg-6 -->
</div>
<!-- /.row -->
<div th:include="include::footer"></div>
<script type="text/javascript">

    /*页面加载完成后直接经i选哪个websocket连接*/
    // var name= [[${usersDO.nickName}]];
    // console.log("asddfsadf");
    $(function () {
        var websocket;
        var userName = $("#userName").val();
        if (userName == null || userName == "") {
            userName = "?";
        }
        connection(userName);
        function connection(userName) {
            var host = window.location.host;
            if ('WebSocket' in window) {
                websocket = new WebSocket("ws://" + host +
                    "/webSocketServer/" + userName);
            } else if ('MozWebSocket' in window) {
                websocket = new MozWebSocket("ws://" + host +
                    "/webSocketServer/" + userName);
            }
            websocket.onopen = function (evnt) {
                $("#tou").html("链接服务器成功!")
                $("#send").prop("disabled", "");
                $("#connection-btn").prop("disabled", "disabled");
                $("#logout").show();
            };
            websocket.onmessage = function (evnt) {
                $("#msg").html($("#msg").html() + "<br/>" + evnt.data);
            };
            websocket.onerror = function (evnt) {
                $("#tou").html("报错!")
            };
            websocket.onclose = function (evnt) {
                $("#tou").html("与服务器断开了链接!");
                $("#send").prop("disabled", "disabled");
                $("#connection-btn").prop("disabled", "");
                $("#logout").hide();
            }
        }

        function send() {
            if (websocket != null) {
                var $message = $("#message");
                var data = $message.val();
                if (data == null || data.trim() == "") {
                    return;
                }
                websocket.send(data);
                $message.val("");
            } else {
                alert('未与服务器链接.');
            }
        }

        $('#send').bind('click', function () {
            send();
        });
        $(document).on("keypress", function (event) {
            if (event.keyCode == "13") {
                send();
            }
        });
        $("#logout-btn").on("click", function () {
            websocket.close(); //关闭TCP连接
        });

        window.onbeforeunload = function (ev) {
            websocket.close(); //关闭TCP连接
        }
    });
</script>
</body>
</html>